<template>
  <div class="app-container">
    <ECard rightTitle="联系人" :ilabel="ilabel" leftTitle="分组">
      <template #left>
        <el-row :gutter="20" style="margin-bottom: 10px">
          <div class="daj" style="font-size: 14px; padding: 0 10px">
            <div style="width: 60px">分组名称</div>
            <el-input
              style="flex: 1; margin-right: 10px"
              v-model="groupName"
              placeholder="请输入分组名称"
              size="small"
              clearable
            ></el-input>
            <el-button
              type="success"
              @click="getData()"
              size="small"
              icon="el-icon-search"
              >查询</el-button
            >
          </div>
        </el-row>
        <el-button type="primary" @click="groupDlFn()" size="small"
          >新增</el-button
        >
        <div class="title">分组列表</div>
        <div class="caidan">
          <div>
            <el-tree
              class="leftTree"
              :data="data"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <i class="el-icon-notebook-2" style="margin-right: 10px"></i>
                <span>{{ node.label }}</span>
                <el-dropdown trigger="click" v-if="data.id">
                  <span class="el-dropdown-link"> ... </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="groupDlFn(data)"
                      >修改</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="leftDelete(data)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <div>
          <EtopSearch
            :options="options"
            @getData="searchFn"
            @resettingFn="resettingFn"
          />
          <el-button type="primary" @click="contactsOpenFn()" size="small"
            >新增</el-button
          >
          <el-button
            @click="adjustmentFn()"
            size="small"
            :disabled="!multi.length"
            >调整分组</el-button
          >
          <ETable
            ref="ETable"
            style="margin-top: 10px"
            checked
            :showIndex="false"
            :height="340"
            :titleObj="titleObj"
            @sortFun="sortFun"
            operateWidth="160"
            :reqObj="setOf"
            :reqFn="getBsContacts"
            @batch="batch"
            :sortData="sortData"
          >
            <template v-slot="{ scope }">
              <el-button @click="contactsOpenFn(scope)" type="text" size="small"
                >修改</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button @click="adjustmentFn(scope)" type="text" size="small"
                >调整分组</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button @click="rightDelete(scope)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </ETable>
        </div>
      </template>
    </ECard>
    <groupEdit ref="groupEdit" />
    <contactsEdit ref="contactsEdit" />
    <adjustmentEdit ref="adjustmentEdit" />
  </div>
</template>

<script>
import ECard from "@/components/ECard";
import ETable from "@/components/ETable";
import groupEdit from "./dialog/groupEdit.vue";
import contactsEdit from "./dialog/contactsEdit.vue";
import adjustmentEdit from "./dialog/adjustmentEdit.vue";
import EtopSearch from "@/components/EtopSearch";
import {
  getBsContactsGroup,
  deleteBsContactsGroup,
  getBsContacts,
  deleteBsContacts,
} from "@/api/smsManage/groupContacts";
export default {
  name: "groupContacts",
  components: {
    ECard,
    ETable,
    adjustmentEdit,
    groupEdit,
    contactsEdit,
    EtopSearch,
  },
  data() {
    return {
      // 分组名字搜索条件
      groupName: "",
      // tree 数据
      data: [],
      defaultProps: {
        children: "children",
        label: "groupName",
      },
      // 行点击相关
      rowID: "",
      rowName: "",
      ilabel: "",

      // ----------------------------------- 右边 -----------------------------------
      // 表格接口请求参数
      setOf: {
        contactsName: "",
        contactsMobile: "",
        groupId: "",
        sortStr: "sortList[0].sortName=contactsName&sortList[0].sortType=asc",
      },
      sortData: {
        len: 6,
        column: ["contactsName"],
        orders: ["ascending"],
      },
      // 表格头部
      titleObj: [
        {
          prop: "contactsName",
          label: "联系人",
          sortable: "custom",
          width: "120",
        },
        { prop: "contactsMobile", label: "手机号", width: "120" },
        {
          prop: "groupName",
          label: "分组",
          width: "160",
        },
        {
          prop: "contactsNotes",
          label: "备注",
          minWidth: "120",
        },
        {
          prop: "crTime",
          label: "添加时间",
          width: "160",
          sortable: "custom",
        },
      ],
      // 多选数据
      multi: [],
      options: [
        {
          type: "input",
          name: "联系人：",
          key: "contactsName",
          value: "",
        },
        {
          type: "input",
          name: "手机号：",
          key: "contactsMobile",
          value: "",
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.getTabelDataFn();
  },
  methods: {
    getBsContacts,
    // 获取tree树
    async getData() {
      const res = await getBsContactsGroup({
        groupName: this.groupName,
        currPage: 1,
        pageSize: 99999,
      });
      if (res.data && res.data.bdata && res.data.bdata.total > 0) {
        this.data = res.data.bdata.gdata;
        this.data.unshift({
          groupName: "未分组（默认分组）",
          groupNotes: "",
          id: "",
        });
      } else {
        this.data = [
          {
            groupName: "未分组（默认分组）",
            groupNotes: "",
            id: "",
          },
        ];
      }
    },
    // 左侧新增修改
    groupDlFn(row) {
      this.$refs.groupEdit.open(row);
    },
    // 左侧删除
    async leftDelete(row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteBsContactsGroup(row.id);
        if (res.data.bcode == 0) {
          this.$message({
            type: "success",
            message: `${res.data.bmsg}`,
          });
        }
        this.getData();
      }
    },
    // 行点击
    async handleNodeClick(row) {
      this.ilabel = row.groupName;
      this.rowID = row.id;
      this.setOf.groupId = row.id;
      this.getTabelDataFn();
    },

    // ----------------------------------- 右边 -----------------------------------
    // 查询
    async getTabelDataFn() {
      this.$refs.ETable.pageInfo.page = 1;
      this.$refs.ETable.getData();
    },
    searchFn(val) {
      // 保存传递出来的搜索数据，用于表格请求
      this.setOf.contactsName = val.contactsName;
      this.setOf.contactsMobile = val.contactsMobile;
      this.getTabelDataFn();
    },
    // 重置
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setOf.contactsName = "";
      this.setOf.contactsMobile = "";
    },
    // 表格点击删除
    async rightDelete(row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteBsContacts(row.id);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(res.data.bmsg);
          // 页数大于一页并且当前页只有一条数据，删除后页数-1
          if (
            this.$refs.ETable.pageInfo.total %
              this.$refs.ETable.pageInfo.size ===
              1 &&
            this.$refs.ETable.pageInfo.page > 1
          ) {
            this.$refs.ETable.pageInfo.page -= 1;
          }
          this.$refs.ETable.getData();
        }
      }
    },
    sortFun(str) {
      this.setOf.sortStr = str;
      this.$refs.ETable.getData();
    },
    // 联系人新增修改
    contactsOpenFn(val) {
      this.$refs.contactsEdit.open(
        val
          ? val
          : {
              groupId: this.rowID,
              groupName: this.ilabel,
            }
      );
    },
    // 调整分组
    adjustmentFn(scope) {
      if (!scope) {
        this.$refs.adjustmentEdit.open({
          id: this.multi.join(","),
          groupName: this.ilabel,
        });
      } else {
        this.$refs.adjustmentEdit.open(scope);
      }
    },
    // 表格传出来的多选事件
    batch(val) {
      let arr = val.map((item) => item.id);
      this.multi = arr;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-card__body {
    position: relative !important;
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 10px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 386px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
